.container {
    width: 100vw;
    height: 100vh;
}
.sider {
    background-image: linear-gradient(to top, #3d6df8, #5b8cff);
    box-shadow: 0 0 10px #666;
}
.header {
    background-image: linear-gradient(to right, #3d6df8, #5b8cff);
    display: flex;
    align-items: center; // 基线对齐
    justify-content: space-around;

    >* {
        padding: 0 8px;
        color: white;
    }

    .flex-box {
        flex: 1;
    }
}
.content {
    height: 10000px;
}

.sider {
    transition: width .3s;

    img {
        display: block;
        margin: 16px auto;
        width: 80%;
    }
    .icon {
        color: white;
    }
}

::v-deep .header .el-tag {
    border: none;
}
::v-deep .header .el-tag--small {
    line-height: 24px;
}
::v-deep .sider .el-menu {
    background: transparent;
    border: none;
    width: 100%;
    // transition: width .3s;

    .el-menu-item {
        color: white;
        width: 100%;
        padding: 0;

        &:hover,
        &.is-active {
            color: #5b8cff;
            background-color: white;

            .icon {
                color: #5b8cff;
            }
        }
    }
}
